<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索框部分 -->
      <el-row type="flex" justify="space-around">
        <el-col :span="24">
          <span style="font-weight: 700; padding-right: 10px">学科名称</span>
          <el-input v-model="subjectNameInput" style="width: 200px; margin-right: 10px" />
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="getSubjects">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <!-- 新增学科按钮 -->
          <el-button class="filter-item fr" size="small" style="margin-left: 10px" type="success" icon="el-icon-edit" @click="handleChange('add')">新增学科</el-button>
          <!--/ 新增学科按钮 -->
        </el-col>
      </el-row>
      <!-- 黑色阴影 -->
      <el-alert show-icon el-icon-info :closable="false" type="info" style="margin-top: 20px; margin-bottom: 20px">数据一共{{ this.counts }}条</el-alert>
      <!-- 黑色阴影 -->

      <!-- 表格  主体区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" prop="id" label="序号" width="60px" />
        <el-table-column prop="subjectName" label="科学名称" width="150px" />
        <el-table-column prop="username" label="创建者" width="150px" />
        <el-table-column prop="addDate" label="创建时间" width="200px">
          <template v-slot="{ row }">
            <span>{{ row.addDate | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="150px">
          <template v-slot="{ row }">
            <span>{{ row.isFrontDisplay === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="150px" />
        <el-table-column prop="tags" label="标签" width="150px" />
        <el-table-column prop="totals" label="题目数量" width="150px" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="medium"
              @click="
                $router.push({
                  name: 'subjects-directorys',
                  query: { id: row.id, name: row.subjectName }
                })
              "
            >
              学科分类
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="
                $router.push({
                  name: 'subjects-tags',
                  params: { id: row.id, name: row.subjectName }
                })
              "
            >
              学科标签
            </el-button>
            <el-button type="text" size="medium" @click="subjectmodify(row)">修改</el-button>
            <el-button type="text" size="medium" @click="removesubject(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页部分  :page-size每页显示条数 -->
      <div class="block" style="text-align: right">
        <el-pagination background :page-size="this.pagesize" layout="prev, pager, next,sizes, jumper" :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 新增学科弹层 -->
    <SubjectsAdd ref="subjects" :showsubject.sync="showsubject" :showmodify="showmodify" @list="list" />
    <!-- /新增学科弹层 -->
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'

// 导入 新增学科弹层
import SubjectsAdd from '../components/subjects-add.vue'

export default {
  components: {
    SubjectsAdd // 新增学科弹层
  },
  data() {
    return {
      subjectNameInput: '', // 搜索框中学科的名字
      // 分页数据
      page: 1, // 页数
      pagesize: 10, // 每页的条数
      counts: 0, // 总记录数
      // 分页数据
      tableData: [
        {
          id: '', // 编号
          subjectName: '', // 学科名称
          username: '', // 创建者
          isFrontDisplay: '', // 前台是否显示
          addDate: '', // 创建日期
          twoLevelDirectory: '', // 二级目录
          tags: '', // 标签
          totals: '' // 题目数量
        }
      ],
      showsubject: false, // 控制新增学科弹层 是否展示
      showmodify: false, // 控制 弹层 是新增 还是 修改  false修改  true新增
      roleForms: undefined // 点击修改传过去的数据
    }
  },
  created() {
    this.list() // 调用学科列表方法
  },
  methods: {
    // 搜索框清除
    clear() {
      this.subjectNameInput = ''
    },

    // 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      // 每页的条数
      this.pagesize = val
      this.list()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      // 当前页码
      this.page = val
      this.list()
    },
    // 分页
    // 添加新增学科
    handleChange() {
      // console.log('新增学科')
      this.showsubject = true // 打开新增弹层
      this.showmodify = true // 新增学科
      // console.log(res)
    },

    // 获取学科列表
    async list() {
      try {
        const res = await list({ page: this.page, pagesize: this.pagesize })
        // console.log(res.data)
        this.tableData = res.data.items
        // 总条数
        this.counts = res.data.counts
      } catch (error) {
        // console.log(error)
        this.$message.error('获取学科列表失败')
      }
    },
    // 搜索学科
    async getSubjects() {
      if (this.subjectNameInput.trim() === '' && this.subjectNameInput.length === 0) {
        return // 如果搜索框为空 直接退出
      }
      const res = await list({ subjectName: this.subjectNameInput, page: 1, pagesize: 10 })
      this.counts = res.data.counts // 总条数
      // console.log(res.data.counts)
      this.tableData = res.data.items
    },

    // 修改 学科
    subjectmodify(row) {
      // console.log(row)
      this.showsubject = true // 打开弹层
      this.showmodify = false // 新增 -> 修改弹层
      // this.roleForms = row // 将数据上传到 修改弹层中
      this.$refs.subjects.getDeptsInfo(row)
    },

    // 删除学科 此操作将永久删除该学科, 是否继续?
    async removesubject(data) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', { type: 'warning' })
        // 删除
        await remove({ id: data.id })
        // console.log(res)
        this.$message.success('删除成功')
        this.list()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>
